<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解密小游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
        }

        .game-container {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            max-width: 600px;
            width: 90%;
            text-align: center;
        }

        .header {
            margin-bottom: 30px;
        }

        h1 {
            color: #4a5568;
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .subtitle {
            color: #718096;
            font-size: 1.2em;
            margin-bottom: 20px;
        }

        .level-indicator {
            background: #e2e8f0;
            padding: 10px 20px;
            border-radius: 25px;
            font-weight: bold;
            color: #4a5568;
            margin-bottom: 20px;
            display: inline-block;
        }

        .game-area {
            margin: 20px 0;
        }

        .clue-box {
            background: #f7fafc;
            border: 2px solid #e2e8f0;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: left;
        }

        .clue-box h3 {
            color: #4a5568;
            margin-bottom: 10px;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 5px;
        }

        .attempts {
            margin: 15px 0;
            font-weight: bold;
            color: #e53e3e;
        }

        .input-group {
            margin: 20px 0;
        }

        input[type="text"] {
            width: 100%;
            padding: 15px;
            border: 2px solid #cbd5e0;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input[type="text"]:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        button {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            margin: 5px;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }

        button:disabled {
            background: #a0aec0;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .message {
            margin: 15px 0;
            padding: 15px;
            border-radius: 10px;
            font-weight: bold;
        }

        .success {
            background: #c6f6d5;
            color: #276749;
            border: 2px solid #9ae6b4;
        }

        .error {
            background: #fed7d7;
            color: #c53030;
            border: 2px solid #fc8181;
        }

        .info {
            background: #bee3f8;
            color: #2c5aa0;
            border: 2px solid #90cdf4;
        }

        .hint-btn {
            background: #fbd38d;
            color: #744210;
        }

        .hint-btn:hover {
            background: #f6ad55;
        }

        .hidden {
            display: none;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e2e8f0;
            border-radius: 4px;
            margin: 20px 0;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background: linear-gradient(90deg, #48bb78, #38a169);
            width: 0%;
            transition: width 0.5s;
        }

        .level-complete {
            animation: celebrate 1s ease-in-out;
        }

        @keyframes celebrate {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .final-message {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="header">
            <h1>🔐 解密小游戏</h1>
            <div class="subtitle">挑战你的逻辑思维和观察力！</div>
        </div>

        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>

        <div class="level-indicator" id="levelIndicator">第 1 关：数字密码</div>

        <div class="game-area" id="gameArea">
            <div class="clue-box">
                <h3>📋 游戏规则</h3>
                <p>每个关卡有3次尝试机会，根据线索破解密码。</p>
                <p>点击"开始游戏"按钮开始挑战！</p>
            </div>
            
            <button onclick="startGame()" id="startBtn">开始游戏</button>
        </div>

        <div id="message" class="message hidden"></div>
    </div>

    <script>
        let currentLevel = 0;
        let attempts = 3;
        let currentPassword = '';
        let levelData = null;

        const levels = [
            {
                name: "第 1 关：数字密码",
                clue: "密码是一个3位数字，每个数字都比前一个数字大2。例如：如果第一个数字是1，那么密码就是135。提示：第一个数字是随机生成的（1-6之间）",
                type: "number",
                generatePassword: function() {
                    const firstNum = Math.floor(Math.random() * 6) + 1;
                    return `${firstNum}${firstNum + 2}${firstNum + 4}`;
                },
                validate: function(input) {
                    return input === currentPassword;
                }
            },
            {
                name: "第 2 关：凯撒密码",
                clue: "每个字母向后移动3位。例如：A→D, B→E, C→F。加密后的密码：KHOOR",
                type: "text",
                generatePassword: function() {
                    return "HELLO";
                },
                validate: function(input) {
                    return input.toUpperCase() === currentPassword;
                }
            },
            {
                name: "第 3 关：数学密码",
                clue: "密码由3个1-9的数字组成。条件：第一个数字 × 第二个数字 + 第三个数字 = 结果。例如：如果结果是15，可能的密码是345（3×4+3=15）",
                type: "number",
                generatePassword: function() {
                    const a = Math.floor(Math.random() * 9) + 1;
                    const b = Math.floor(Math.random() * 9) + 1;
                    const c = Math.floor(Math.random() * 9) + 1;
                    this.result = a * b + c;
                    return `${a}${b}${c}`;
                },
                validate: function(input) {
                    if (input.length !== 3 || !/^\d{3}$/.test(input)) return false;
                    const [x, y, z] = input.split('').map(Number);
                    return x * y + z === this.result;
                }
            },
            {
                name: "第 4 关：终极挑战",
                clue: "这个密码结合了前三关的元素：\n1. 第一个数字：比5大2的数字\n2. 第二个部分：解密'ZRUOG'（凯撒密码，移动3位）\n3. 第三个数字：使得 第一个数字 × 3 + 第三个数字 = 30",
                type: "text",
                generatePassword: function() {
                    return "7world9";
                },
                validate: function(input) {
                    return input.toLowerCase() === currentPassword.toLowerCase();
                }
            }
        ];

        function startGame() {
            currentLevel = 0;
            attempts = 3;
            loadLevel();
        }

        function loadLevel() {
            levelData = levels[currentLevel];
            currentPassword = levelData.generatePassword();
            
            document.getElementById('levelIndicator').textContent = levelData.name;
            document.getElementById('startBtn').style.display = 'none';
            
            const gameArea = document.getElementById('gameArea');
            gameArea.innerHTML = `
                <div class="clue-box">
                    <h3>📋 线索</h3>
                    <p>${levelData.clue.replace(/\n/g, '<br>')}</p>
                    ${levelData.result ? `<p><strong>计算结果：${levelData.result}</strong></p>` : ''}
                </div>
                
                <div class="attempts" id="attemptsDisplay">剩余尝试次数：${attempts}</div>
                
                <div class="input-group">
                    <input type="text" id="answerInput" placeholder="请输入答案..." onkeypress="handleKeyPress(event)">
                </div>
                
                <div>
                    <button onclick="checkAnswer()">提交答案</button>
                    <button class="hint-btn" onclick="showHint()">提示</button>
                </div>
            `;
            
            document.getElementById('answerInput').focus();
            updateProgress();
            hideMessage();
        }

        function handleKeyPress(event) {
            if (event.key === 'Enter') {
                checkAnswer();
            }
        }

        function checkAnswer() {
            const input = document.getElementById('answerInput').value.trim();
            const message = document.getElementById('message');
            
            if (!input) {
                showMessage('请输入答案！', 'error');
                return;
            }

            if (levelData.validate(input)) {
                showMessage('✓ 恭喜！答案正确！', 'success');
                document.getElementById('gameArea').classList.add('level-complete');
                
                setTimeout(() => {
                    if (currentLevel < levels.length - 1) {
                        currentLevel++;
                        attempts = 3;
                        loadLevel();
                    } else {
                        showFinalMessage();
                    }
                }, 2000);
            } else {
                attempts--;
                document.getElementById('attemptsDisplay').textContent = `剩余尝试次数：${attempts}`;
                
                if (attempts > 0) {
                    showMessage('✗ 答案错误，请再试一次！', 'error');
                    document.getElementById('answerInput').value = '';
                    document.getElementById('answerInput').focus();
                } else {
                    showMessage(`游戏结束！正确答案是：${currentPassword}`, 'error');
                    setTimeout(() => {
                        document.getElementById('gameArea').innerHTML = `
                            <button onclick="startGame()">重新开始</button>
                        `;
                    }, 3000);
                }
            }
        }

        function showHint() {
            const message = document.getElementById('message');
            let hint = '';
            
            switch(currentLevel) {
                case 0:
                    hint = '提示：观察数字之间的规律，每个数字递增2';
                    break;
                case 1:
                    hint = '提示：凯撒密码中，每个字母向后移动3位，A→D, B→E, C→F...';
                    break;
                case 2:
                    hint = '提示：尝试不同的数字组合，确保满足数学条件';
                    break;
                case 3:
                    if (attempts === 2) {
                        hint = '提示：第一个数字是7';
                    } else if (attempts === 1) {
                        hint = '提示：单词部分是"world"';
                    } else {
                        hint = '提示：将三个部分组合起来';
                    }
                    break;
            }
            
            showMessage(hint, 'info');
        }

        function showFinalMessage() {
            const gameArea = document.getElementById('gameArea');
            gameArea.innerHTML = `
                <div class="final-message">
                    <h2>🎉 恭喜你！</h2>
                    <p>你成功完成了所有关卡！</p>
                    <p>你展现出了卓越的解密能力！</p>
                </div>
                <button onclick="startGame()">再玩一次</button>
            `;
            document.getElementById('progress').style.width = '100%';
        }

        function showMessage(text, type) {
            const message = document.getElementById('message');
            message.textContent = text;
            message.className = `message ${type}`;
            message.classList.remove('hidden');
        }

        function hideMessage() {
            document.getElementById('message').classList.add('hidden');
        }

        function updateProgress() {
            const progress = document.getElementById('progress');
            const progressPercent = (currentLevel / levels.length) * 100;
            progress.style.width = `${progressPercent}%`;
        }
    </script>
</body>
</html>